<template>
  <button class="ui-btn" @click="btnClick"
    :class="{'ui-btn-xsmall': xsmall, 'ui-btn-small': small,
      'ui-btn-large': large, 'ui-btn-xlarge': xlarge,
       'ui-btn-tile': tile, 'ui-btn-rounded': rounded, 'ui-btn-cicle': cicle,
        'ui-btn-disable': disable }"
          :style="`--color-tint: ${TintColor}`">
<!-- 通过插槽可以从父组件给button传值 -->
    <slot>button</slot>
  </button>
</template>

<script lang="ts">
  // 入坑的一个点，子组件通过Emit向父组件发射事件，子组件必须注册Component组件，否则报错
  import { Component, Vue, Emit, Prop } from "vue-property-decorator"

  @Component
  export default class ButtonUI extends Vue{
    @Prop(Boolean) private xsmall: boolean | undefined
    @Prop(Boolean) private small: boolean | undefined
    @Prop(Boolean) private large: boolean | undefined
    @Prop(Boolean) private xlarge: boolean | undefined
    @Prop(Boolean) private tile: boolean | undefined
    @Prop(Boolean) private rounded: boolean | undefined
    @Prop(Boolean) private cicle: boolean | undefined
    @Prop(Boolean) private disable: boolean | undefined
    @Prop(String) private color: string | undefined
      /**
       *用脚本中的 colo r控制按钮的背景色
       * 1.动态绑定style，
       * 2.根据变量值定义样式， :style="`--color-tint: ${color}`" 切用var(), 注意var有第二个默认参数
       * 注意：如果 color 没有值的话，则为 undefined ，var(undefined) css不认识 undefined，所以无法给它默认值
       *      计算属性，计算 color 的值, ts 中的计算属性为 get , 则 动态绑定的 color 为计算属性的属性名
       */

      /*@Emit 是装饰一个函数的，有一个字符串的参数，为发送事件的名称和this.$emit()
的事件名称是一样的
@Emit('click') private emitClickEvent() {}=== this.$emit('click')
* */

    @Emit('click') private EmitBtnClick(event: MouseEvent) {}

    private get TintColor() {
        if(this.color) {
            return this.color
        } else {
            return '#2d8cf0'
        }
    }
      /*
         * 当我们想在button内部监听到点击事件，在内部决定什么时候响应事件，什么时候不响应事件，
         * 所以$listeners方法不合适
         *  在button上绑定一个点击事件，在该事件内部将click消息发送出去，
         * 在父组件内部在监听这个消息
         *  */
    private btnClick(event: MouseEvent) {
        //     // this.$emit() // 可以向外部发送事件，但是类样式组件提供了一个装饰器，可供发射事件使用Emit
        //     this.emitClickEvent() // 向外发送一个事件
        if(this.disable) return
        this.EmitBtnClick(event)
    }

    private mounted() {
        console.log(this.large);
    }
  }
</script>

<style lang="stylus" scoped>
  /* stylus样式中间不能随意写注释，不然样式无效 */
  /*
  混合和函数很像，但是不是函数，函数内部进行逻辑运算，有返回值
  混合是为了原封不动的把东西替换到调用函数的位置
   */
resize(minWidth, heigth, paddLR, fontSize)
  min-width minWidth
  height heigth
  padding 0 paddLR
  font-size fontSize
  &.ui-btn-rounded
    border-radius (@height / 2)
  &.ui-btn-cicle
    width @height
    border-radius (@height / 2)
    padding 0
    min-width 0
  /*  background var(--color-tint,#2d8cf0) */

.ui-btn
  resize(64px, 36px, 16px, 0.875rem)
  border-radius 4px
  border 0 solid transparent
  color #17233D
  background var(--color-tint)
  font-weight 500
  letter-spacing 0.09em
  cursor pointer
  user-select none
  /* 鼠标悬停和鼠标激活，颜色变亮和变暗 */
  &:hover
    filter brightness(120%)
  &:active
    filter brightness(80%)
  /*
  仔细观察下，按钮必须含有 .ui-btn 这个类，其他的类有可能出现在 .ui-btn 这个类上
  则将  .ui-btn-xxxxx 等缩进，加上 & 标识，具有  .ui-btn 同时具有 .ui-btn-xxxxx 类的话
  */
  &.ui-btn-xsmall
    resize(36px, 20px, 9px, 0.625rem)
  &.ui-btn-small
    resize(50px, 28px, 12px, 0.75rem)
  &.ui-btn-large
    resize(78px, 44px, 19px, 0.875rem)
  &.ui-btn-xlarge
    resize(92px, 52px, 23px, 1rem)
  &.ui-btn-tile
    border-radius 0
    /*
    圆角为高度的一般，stylus可以动态计算属性高度，除法加（）
    但会发现圆角不对，因为 resize() 会动态计算高度，但是 (@height / 2) 是写死的，
    将动态计算圆角的样式放在 热size（）中
     */
  &.ui-btn-rounded--1
  /*border-radius (@height / 2)*/
  &.ui-btn-cic--1
    width @height
  /*border-radius (@height / 2)*/

  &.ui-btn-disable
    background #f5f5f5
    color #c5c8ce
    cursor not-allowed

/* .ui-btn-xxxxx  系列的样式都差不多，至少数据不同，
如果出现在脚本中，则封装函数，
但是这里需要用到的不是函数，而是样式的混入 */
.ui-btn-xsmall--1
  resize(36px, 20px, 9px, 0.625rem)

.ui-btn-small--1
  resize(50px, 28px, 12px, 0.75rem)

.ui-btn-large--1
  resize(78px, 44px, 19px, 0.875rem)

.ui-btn-xlarge--1
  /*min-width 92px*/
  /*height 52px*/
  /*padding 0 23px*/
  /*font-size 1rem*/
  resize(92px, 52px, 23px, 1rem)

</style>
